<template>
    <div class="customComponents">
        <div class="customToolContainer editTool" v-if="!staticComponent">
            <el-tooltip class="item" :enterable="false" effect="dark" content="设置" placement="bottom">
                <i class="el-icon-s-tools customTool" @click="clickSetting"></i>
            </el-tooltip>
            <el-tooltip class="item" :enterable="false" effect="dark" content="删除" placement="bottom">
                <i class="el-icon-delete-solid customTool" @click="deleteComponent"></i>
            </el-tooltip>
        </div>
        <div class="customToolContainer operTool" v-if="fullSceenAbled">
            <el-tooltip class="item" :enterable="false" effect="dark" content="全屏" placement="bottom">
                <i class="iconfont cgsIcon-quanping customTool iconTool" @click="fullScreen"></i>
            </el-tooltip>
        </div>
        <sceen3D ref="customComponent" v-if="config.type === 'sceen3d'" :config='config' :shared="shared"></sceen3D>
        <sceen2D ref="customComponent" v-if="config.type === 'sceen2d'" :config='config' :shared="shared"></sceen2D>
        <sceen-earth ref="customComponent" v-if="config.type === 'sceenEarth'" :config='config' :shared="shared"></sceen-earth>
        <chart ref="customComponent" v-if="config.type === 'chart'" :config='config' :shared="shared"></chart>
        <urlIframe ref="customComponent" v-if="config.type === 'urlIframe'" :config='config' :shared="shared"></urlIframe>
        <url-button ref="customComponent" v-if="config.type === 'urlButton'" :config='config' :shared="shared"></url-button>
    </div>
</template>

<script>
import sceen3D from "./sceen3D.vue"
import sceen2D from "./sceen2D.vue"
import sceenEarth from "./sceenEarth.vue"
import chart from "./chart/index.vue"
import urlIframe from "./urlIframe.vue"
import urlButton from "./urlButton.vue"
export default {
    components:{
        sceen3D,
        chart,
        sceen2D,
        sceenEarth,
        urlIframe,
        urlButton
    },
    props: {config:Object, staticComponent:Boolean, fullSceenAbled:{type: Boolean, default: true}, shared: {type: Boolean, default: false}},
    data(){
        return {
            fullscreen: false
        }
    },
    mounted(){
        // window.addEventListener('fullscreenchange', this.fullSceenChangeHandler);
    },
    beforeDestroy(){
        // window.removeEventListener('fullscreenchange', this.fullSceenChangeHandler);
    },
    methods:{
        fullSceenChangeHandler(){
            let _this = this
            if(_this.$refs.customComponent?.resize){
              setTimeout(() => {
                    _this.$refs.customComponent.resize()
              }, 100)
            }
        },
        fullScreen(){
            let fullarea = this.$refs.customComponent.$el
            if (fullarea.requestFullscreen) {
                fullarea.requestFullscreen();
            } else if (fullarea.webkitRequestFullScreen) {
                fullarea.webkitRequestFullScreen();
            } else if (fullarea.mozRequestFullScreen) {
                fullarea.mozRequestFullScreen();
            } else if (fullarea.msRequestFullscreen) {
                // IE11
                fullarea.msRequestFullscreen();
            }
        },
        clickSetting(){
            this.$emit('clickSetting', this.$props.config)
        },
        deleteComponent(){
            this.$emit('delete', this.$props.config)
        },
        resize(newHPx, newWPx){
            // console.log(newHPx, newWPx)
            this.$refs.customComponent.resize(newHPx, newWPx)
        }
    }
    
}
</script>

<style scoped>
.customComponents{
    width: 100%;
    height: 100%;
}
.customComponents>div{
    background: #fff;
}
.customComponents .customToolContainer{
    position: absolute;
    z-index: 9999;
    display: none;
    text-align: center;
    padding-top: 5px;
}
.customToolContainer.editTool{
    width: 200px;
    left: 50%;
    height: 30px;
    margin-left: -100px;
    box-shadow: 0px 6px 10px #000;
    border-radius: 0px 0px 5px 5px;
    color: #333;
}
.customToolContainer.operTool{
    background:transparent;
    right: 20px;
    height: 40px;
    color: rgba(0,0,0,0.6)
    /* font-size: 25px; */
}
.customToolContainer.operTool .iconTool{
    font-weight: 700;
    font-size: 20px;
}
/* .customToolContainer.operTool:hover>i{
    font-size: 45px;
} */
.customComponents .customToolContainer .customTool{
    cursor: pointer;
}

.customComponents .customToolContainer .customTool:hover{
    color: #5cb6ff
}
.customComponents:hover .customToolContainer{
    display: inline-block;
}
</style>